<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>闪烁js_demo</title>
</head>
<body>
	<section id="wraper">
	  <div id="flash1">
		<p>方法一：做4个span,每个的颜色均变为黑色，当数值到达obj.length后就全变为白色（相当于隐藏）</p>
		<p id="flashbox1">
			<span class="line1">-</span>
			<span class="line1">-</span>分钟
			<span class="line1">-</span>
			<span class="line1">-</span>小时
		</p>
	  </div>
	</section>
	<script type="text/javascript">
function getClass(classname,parent){
	//document.getElementsByClass()IE10以前都不支持
	//必选写前面，parent父元素可选
	var oParent = parent ? document.getElementById(parent) : document,
		eles = [],//最后取到的结果是数组，class可以使很多
		elements = oParent.getElementsByTagName("*");//取到oParent下面的所有元素

	//遍历elements 找到class相同的，放入eles里面。
	for(var i=0,l=elements.length;i<l;i++){
		if(elements[i].className==classname){
			eles.push(elements[i]);
		}
	}
	return eles;
}

window.onload =  function(){
	var timerShow = null;
	var flashLight = {
		startFlash: function(obj){
			l = obj.length;
			var count = 0;
			clearInterval(timerShow);
			timerShow = setInterval(function(){
				obj[count].style.color = "#000";
				if(count<4){
					count++;
				}
				if(count==4){
					setTimeout(function(){
					    for(var i=0;i<l;i++){
					  	  obj[i].style.color = "#fff";
					    }
					},300);
					count = 0;
				}
				alert("count on: "+count);
			},500);
		},
		stopFlash: function(obj){
			clearInterval(timerShow);
			for(var i=0,l=obj.length;i<l;i++){
			  obj[i].style.color = "#000";
			}
		}
	};

	var oParent = document.getElementById("flashbox1"),
		oEles = getClass("line1","flashbox1");
	oParent.onmouseover = function(){
		flashLight.startFlash(oEles);
	};
	oParent.onmouseout = function(){
		flashLight.stopFlash(oEles);
	};
};


	</script>
</body>
</html>